<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="assets/css/reset-global.css" />
    <link rel="stylesheet" href="assets/css/website.css" />
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <script src="assets/js/jquery.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
  </head>
  <body>
     <!-- 头部 -->
<!--    <div class="top">-->
<!--      <div class="header same">-->
<!--        <div class="top center flex">-->
<!--          <div class="header_left flex">-->
<!--            <img src="assets/img/top1.png" alt="">-->
<!--            <img src="assets/img/top2.png" alt="">-->
<!--            <img src="assets/img/top3.png" alt="">-->
<!--            <img src="assets/img/top4.png" alt="">-->
<!--            <img src="assets/img/top5.png" alt="">-->
<!--          </div>-->
<!--          <div class="header_right  flex" >-->
<!--            <div class="emli flex">-->
<!--              <img src="assets/img/1_06.png" alt="">-->
<!--              <p>ContacUst@Gmail.com</p>-->
<!--            </div>-->
<!--            <div class="emli flex">-->
<!--              <img src="assets/img/1_03.png" alt="">-->
<!--              <p>80888887</p>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--      &lt;!&ndash; top_header &ndash;&gt;-->
<!--      <div class="nav same">-->
<!--        <div class="navs center flex">-->
<!--          <div class="logo"> <img src="assets/img/1_11.png" alt=""></div>-->
<!--          <ul class="flex">-->
<!--            <li><a href="index" >HOME</a></li>-->
<!--            <li><a href="blog">BLOG</a></li>-->
<!--            <li><a href="aboutus" >ABOUT US</a></li>-->
<!--            <li><a href="contact" class="active">CONTACT</a></li>-->
<!--          </ul>-->
<!--        </div>-->
<!--      </div>-->
<!--      &lt;!&ndash; top_nav &ndash;&gt;-->
<!--      <div class="same banner">-->
<!--        <div class="banner_cot center">-->
<!--          <div class="wenzi">-->
<!--            <h1>SEE &nbsp; THE&nbsp; WORD&nbsp; DIFFERENTLY</h1>-->
<!--            <p>Request,design and book travel experiences as uniquelas you are</p>-->
<!--          </div>-->
<!--          <div class="search">-->
<!--            <input type="search" placeholder="Where are you going ?">-->
<!--            <button type="button" >-->
<!--              <span class="glyphicon glyphicon-search" aria-hidden="true"></span>-->
<!--              Search-->
<!--            </button>-->
<!--          </div>-->
<!--          <div class="paris">-->
<!--            <p>TOP DESTINATION: PARIS ,ZNEWYORKLONDON ROMESANFRANC c  MORE..</p>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--      &lt;!&ndash; top_bnaner &ndash;&gt;-->
<!--    </div>-->

     <div th:include="pub_head"></div>


     <div class="content">
      <div class="contents">
        <div class="contentleft">
          <p>Content</p>
          <form action="">
            <div class="con1">
              <span>Enter you name:</span>
              <input type="text" id="name" value=""/>
            </div>
            <div class="con1">
              <span>Enter you email:</span>
              <input type="text" id="email" value="" />
            </div>
            <div class="con2">
              <span>Your message here:</span>
              <textarea name="message" id="message" cols="" rows=""></textarea>
            </div>
          </form>
          <div class="con3">
            <button type="button" id="sub">Submit</button>
          </div>
        </div>
        <div class="zhutiright">
          <div class="zhuright">
            <img src="assets/img/2_03.png" alt="" />
          </div>
          <div class="zhuright1">
            <span>Tags</span>
            <p><meter min="0" low="100" high="90" max="100" optimum="100" value="30"></meter></p>
            <div class="pq"><p>animals , cooking , countries ,home , likes , photo , travel ,video</p></div>
          </div>
          <div class="zhuright2">
            <span>TRENDING NEWS</span>
            <p><meter min="0" low="100" high="90" max="100" optimum="100" value="90"></meter></p>
            <div class="zhuright2s">
              <img src="assets/img/2_07.png" alt="" />
              <p>An djak ajs ajida ajskdja akdj dalkdl adas</p>
            </div>
            <div class="zhuright2s">
              <img src="assets/img/2_10.png" alt="" />
              <p>An djak ajs ajida ajskdja akdj dalkdl adas</p>
            </div>
            <div class="zhuright2s">
              <img src="assets/img/2_12.png" alt="" />
              <p>An djak ajs ajida ajskdja akdj dalkdl adas</p>
            </div>
            <div class="zhuright2s">
              <img src="assets/img/2_14.png" alt="" />
              <p>An djak ajs ajida ajskdja akdj dalkdl adas</p>
            </div>
          </div>
          <div class="zhuright3">
            <span>Archives</span>
            <p><meter min="0" low="100" high="90" max="100" optimum="100" value="40"></meter></p>
            <div class="xiala">
              <form>
                <select>
                  <option>Select Mouth</option>
                </select>
              </form>
            </div>
          </div>
          <div class="zhuright4">
            <span>Gallery</span>
            <p><meter min="0" low="100" high="90" max="100" optimum="100" value="40"></meter></p>
            <div class="zhuright4s">
              <img src="assets/img/2_12.png" alt="" />
              <img src="assets/img/1_65.png" alt="" />
              <img src="assets/img/1_68.png" alt="" />
            </div>
            <div class="zhuright4s">
              <img src="assets/img/1_70.png" alt="" />
              <img src="assets/img/1_72.png" alt="" />
              <img src="assets/img/1-2_06.png" alt="" />
            </div>
            <div class="zhuright4s">
              <img src="assets/img/2_12.png" alt="" />
              <img src="assets/img/2_10.png" alt="" />
              <img src="assets/img/2_07.png" alt="" />
            </div>
            <div class="zhuright4s">
              <img src="assets/img/1_72.png" alt="" />
              <img src="assets/img/1_68.png" alt="" />
              <img src="assets/img/2_12.png" alt="" />
            </div>
          </div>
          <div class="zhuright5">
            <span>Meta</span>
            <p><meter min="0" low="100" high="90" max="100" optimum="100" value="30"></meter></p>
            <div class="meta">
              <p class="metes">>May 2015</p>
              <p class="metes">>May 2015</p>
              <p class="metes">>May 2015</p>
              <p class="metes">>May 2015</p>
            </div>
          </div>
        </div>
      </div>
    </div>
      </div>
    </div>

    <!-- 底部 -->
<!--  <div class="bottom same">-->
<!--    <div class="bottom_top center flexs">-->
<!--      <div class="botTop_left">-->
<!--        <img src="../img/1_78.png" alt="">-->
<!--        <p>-->
<!--          Nam libero tempore,cum soluta nobis esteligendi optio cumque quod maxime-->
<!--          placeat cum soluta nobis facere possimusnihil impedit quo minus id quod maximeplaceat facere possimus. est eligendioptio cumque-->
<!--        </p>-->
<!--        <p>-->
<!--          facere possimus nihil impedit quo minusid quod maxime placeat facere possimus.-->
<!--        </p>-->
<!--      </div>-->
<!--      <div class="botTop_left">-->
<!--        <h3>News Letter</h3>-->
<!--        <div class="progress">-->
<!--          <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%">-->
<!--            <span class="sr-only">50% Complete (warning)</span>-->
<!--          </div>-->
<!--        </div>-->
<!--        <p>-->
<!--          facere possimus nihil iimpedit quo minusid quod maxime placeat facere possimus.est eligendi-->
<!--        </p>-->
<!--        <input type="text" placeholder="Enter your emall adaress...">-->
<!--        <button>SUBCRIBE NOW</button>-->
<!--      </div>-->
<!--      <div class="botTop_left">-->
<!--        <h3>News Letter</h3>-->
<!--        <div class="progress">-->
<!--          <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%">-->
<!--            <span class="sr-only">50% Complete (warning)</span>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="photos flex">-->
<!--          <img src="../img/1-2_03.png" alt="">-->
<!--          <img src="../img/1-2_03.png" alt="">-->
<!--          <img src="../img/1-2_03.png" alt="">-->

<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--  </div>-->
<!--  <div class="bottoms same">-->
<!--    <p>Copyright D 2015.Company name All rights reserved.氧设计</p>-->
<!--  </div>-->

     <div th:include="pub_footer"></div>

     <script type="text/javascript">
       $(function () {
         $('#sub').click(function () {
           let name = $('#name').val()
           let email = $('#email').val()
           let message = $('#message').val()
           console.log(name,email,message)
           if(name == ''){
             alert('请输入昵称')
             return  false;
           }
           if(!name.match(/^[\u4E00-\u9FA5]{2,4}$/)){
             alert('请输入正确的昵称！')
             $("#contact-name").focus();
             return  false;
           }
           if(email == ''){
             alert('请输入邮箱')
             return  false;
           }
           if(!email.match(/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/)){
             alert('邮箱格式错误,请重新输入！')
             $("#contact-email").focus();
             return  false;
           }
           if(message == ''){
             alert('请留言')
             return  false;
           }
           if(message.length >255 ){
             alert('留言内容不能超过255位')
             $("#contact-message").focus();
             return  false;
           }
           $.ajax({
             type: "get",
             url: '/cms_message',
             data: {
               name: name,
               email: email,
               message: message,
             },
             dataType: "json",
             success: function (data) {
               // layer.msg(data.msg);
               //重新加载页面
               if (data == 1) {
                 setTimeout(function () {
                   alert("留言成功")
                   window.location.reload();
                 }, 2000);
               }else{
                 alert("留言失败")
               }
             }
           });
           return false
         });
       });
     </script>


  </body>
</html>
